<template>
  <nav class="nav">
    <div class="left">
      <a href="#">X-Innovation</a>
    </div>
    <div class="mid">
      <Dropdown>
        <a href="javascript:void(0)">
          机器人简介
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem
            ><span @click="transitionTo" class="transition"
              >核心技术</span
            ></DropdownItem
          >
          <DropdownItem>
            <router-link to="/detail/9">
              <span class="transition">发展历程</span>
            </router-link>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Dropdown>
        <router-link to="/pic">疫情中的贡献 </router-link>
      </Dropdown>
      <Dropdown>
        <a href="javascript:void(0)">
          传承人文科学
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem>
            <router-link to="/detail/6">
              <span class="transition">书法</span>
            </router-link>
          </DropdownItem>
          <DropdownItem>
            <router-link to="/detail/7">
              <span class="transition">皮影</span>
            </router-link>
          </DropdownItem>
          <DropdownItem>
            <router-link to="/detail/8">
              <span class="transition">木偶机器人</span>
            </router-link>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </nav>
</template>

<script>
export default {
  name: "Nav",
  methods: {
    transitionTo() {
      if (window.location.pathname === "/view") {
        return;
      }
      this.$router.push({ path: "/view" });
      this.$emit("handleVideo");
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  position: fixed;
  display: flex;
  left: 0;
  top: 0;
  min-width: 94rem;
  width: 100%;
  justify-content: space-between;
  height: 8rem;
  padding: 0 2rem;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 2rem;
  z-index: 3;
  align-items: center;
  .left {
    .nav-img {
      width: 1rem;
      height: 1rem;
    }
  }
  .mid {
    display: flex;
    width: 72rem;
    justify-content: space-around;
  }
}
.transition {
  display: inline-block;
  width: 100%;
  height: 100%;
}
</style>